<template>
  <view class="run-group-page">
    <view class="header-box">
      <image
        class="header-bg"
        :src="
          groupInfo && groupInfo.groupPhoto
            ? groupInfo.groupPhoto
            : 'https://lk-h-healthbot-sport-server.oss-cn-beijing.aliyuncs.com/5ea15f72-834e-475e-b123-33acef26f140.png?Expires=2669361767&OSSAccessKeyId=LTAI5tGMV4iDYLz23MFsXVKY&Signature=FZEQ02TSGoxpNkVqp9Qs9GKMQAQ%3D'
        "
      ></image>
      <view class="header" :style="{ paddingTop: useAppData.titleHeight + 3 + 'px' }">
        <view class="back-box" style="left: 0" @tap="gotoBack">
          <image class="back-img" src="../../static/icon-back.png"></image>
        </view>
        <span v-if="myGroupInfo?.groupId &&
          state.routeOptions?.groupId &&
          myGroupInfo?.groupId == state.routeOptions?.groupId">我的跑团</span>
      </view>
      <view class="update-btn" @tap="refreshPage">
        <text class="label">下拉刷新</text>
        <image class="icon" src="../../static/shuaxin@2x.png"></image>
      </view>
    </view>
    <view class="user-group-modal">
      <view class="header">
        <view class="avatar">
          <image
            class="img"
            :src="groupInfo && groupInfo.groupHeadImage ? groupInfo.groupHeadImage : ''"
          ></image>
        </view>
        <view class="header-right">
          <view
            class="add-member"
            v-if="
            myGroupInfo?.groupId == state.routeOptions?.groupId ||
              !state.routeOptions?.groupId
            "
            @tap="openSharePopup"
          >
            <image class="icon" src="../../static/add@2x.png"></image>
            <text class="label">添加成员</text>
          </view>
          <view class="qr-code" @tap="onOpenQrcode">
            <ToastArrow
              v-if="state.showToast"
              message="加入跑团微信群聊、兑奖咨询，请扫描二维码"
            ></ToastArrow>
            <image class="icon-code" src="../static/icon-erweima.png"></image>
          </view>
        </view>
      </view>
      <view class="group-info-container">
        <view class="group-info">
          <view class="name">
            <text class="username">{{
              groupInfo && groupInfo.groupName ? groupInfo.groupName : ""
            }}</text>
            <image
              v-if="groupInfo && groupInfo.groupRole && groupInfo.groupRole == 1"
              class="icon"
              src="../../static/bianji@2x.png"
              @tap="openEditeModal"
            ></image>
          </view>
          <text class="group-id"
            >跑团ID {{ groupInfo && groupInfo.groupId ? groupInfo.groupId : "" }}</text
          >
          <text class="group-id group-create">{{ state.createTime }}成立</text>
          <view class="group-member">
            <view class="progress-bar">
              <view :style="{ width: state.barWidth }" class="current-progress"></view>
            </view>
            <text class="label"
              >{{ groupInfo && groupInfo.memberNumber ? groupInfo.memberNumber : "" }}/{{
                groupInfo && groupInfo.limitNumber ? groupInfo.limitNumber : ""
              }}位成员</text
            >
          </view>
          <view class="total-distance">
            <view class="distance-item">
              <text
                >{{
                  groupInfo && groupInfo.totalDistance ? groupInfo.totalDistance : 0
                }}公里</text
              >&nbsp; | &nbsp;
              <view
                >里程榜<text class="group-rank">{{ groupInfo?.distanceRank }}</text
                >名</view
              >
            </view>
            <view class="distance-item">
              <view class="thumbs-up">
                <view class="like-con" @click.stop="onCreateThumsUp(groupInfo)">
                  <image class="icon-like" :src="!groupInfo?.isLike ? phLikeDefault : phLikeActive"></image>
                  <view :animation="state.animationData[groupInfo?.groupId]" class="praise-me animation-opacity">+1</view>
                </view>
                <text>{{ groupInfo?.likeNumber }}</text>
              </view>
              &nbsp; | &nbsp;
              <view
                >点赞榜<text class="group-rank">{{ groupInfo?.likeRank }}</text
                >名</view
              >
            </view>
          </view>
        </view>
        <view class="bottom-line"></view>
      </view>
    </view>
    <view class="run-group-info">
      <ul class="group-member-list">
        <template v-if="groupMemberList">
          <li
            class="group-member-item"
            v-for="(item, index) in groupMemberList"
            :key="index"
          >
            <view class="avatar">
              <image
                class="icon"
                :src="
                  item.headUrl ||
                  'https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/avart-wu.png'
                "
              ></image>
            </view>
            <view class="member-info">
              <view class="name">
                <text class="nickname">{{ item.name }}</text>
                <image
                  v-if="item.gender === 1"
                  class="sex-icon"
                  src="../../static/icon-boy.png"
                ></image>
                <image
                  v-else-if="item.gender === 2"
                  class="sex-icon"
                  src="../../static/icon-girl.png"
                ></image>
                <text v-if="item.groupRole === 1" class="label">团长</text>
                <text
                  v-if="
                    state.userInfo &&
                    state.userInfo.customers &&
                    state.userInfo.customers.customerId === item.userId
                  "
                  class="label me"
                  >本人</text
                >
              </view>
              <text class="distance-info">
                跑步{{ item.totalDistance }}公里 | 跑步{{ item.runCount }}次
              </text>
            </view>
            <view
              v-if="item.groupRole == 0 && groupInfo && groupInfo.groupRole == 1"
              class="operation"
              @tap="openOperation(item)"
            >
              <image class="points" src="../../static/diandian.png"></image>
            </view>
          </li>
        </template>
        <view
          v-if="
            myGroupInfo?.groupRole == 0 &&
            (myGroupInfo?.groupId == state.routeOptions?.groupId ||
              !state.routeOptions?.groupId)
          "
          class="leave-group"
          @tap="leaveGroup"
          >退出跑团</view
        >
        <view
          v-if="
            !myGroupInfo ||
            (state.routeOptions?.groupId &&
              myGroupInfo?.groupId != state.routeOptions?.groupId)
          "
          :class="[
            'leave-group',
            'common-btn',
            'add-group',
            { 'full-starffed': groupInfo?.fullStarffed },
          ]"
          @tap="onJoinGroup"
        >
          {{ groupInfo?.fullStarffed ? "已满员" : "加入该团" }}
        </view>
      </ul>
    </view>
    <!--    <view class="no-record">-->
    <!--      <image class="no-img" src="../../static/no-record.png"></image>-->
    <!--      <text>无记录</text>-->
    <!--    </view>-->
    <ShareGroup ref="shareGroupRef"></ShareGroup>
    <PictureUpload
      ref="uploadAvatar"
      title="编辑跑团"
      v-show="showPictureUpload"
      type="update"
      :uuid="groupInfo && groupInfo.uuid ? groupInfo.uuid : ''"
      :groupName="groupInfo && groupInfo.groupName ? groupInfo.groupName : ''"
    />
    <uni-popup ref="transferPopup" type="bottom" border-radius="10px 10px 0 0">
      <view class="popup-container">
        <view class="op-content">
          <view class="op-item" @tap="transTeamLeader">转让团长</view>
          <view class="op-item" @tap="deleteMember">移除团员</view>
        </view>
        <view class="close-btn" @tap="closePopup">取消</view>
      </view>
    </uni-popup>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        cancelText="取消"
        confirmText="确定"
        title=""
        @confirm="dialogConfirmTrans"
        @close="dialogClose"
      >
        <view class="dialog-content">
          <template v-if="state.dialogType === 1">
            <view class="label">确定将团长转让给该团员吗？</view>
            <view class="text">你的所有权限将被收回</view>
          </template>
          <template v-else-if="state.dialogType === 2">
            <view class="label">确定将成员移除吗？</view>
            <view class="text">移除后将无法再次入团</view>
          </template>
          <template v-else-if="state.dialogType === 3">
            <view class="label">确定退出跑团吗？</view>
            <view class="text">退出后将无法再次入团</view>
          </template>
        </view>
      </uni-popup-dialog>
    </uni-popup>
    <JoinGroup ref="joinGroupRef"></JoinGroup>
  </view>
</template>

<script setup>
import {
  onLaunch,
  onLoad,
  onShow,
  onHide,
  onUnload,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import * as API from "../../api/api";
import { getTime, checkUserInfo } from "../../utils/util";
import { storeToRefs } from "pinia";
import PictureUpload from "../components/pictureUpload";
import JoinGroup from "../components/joinGroup"
import { useRunInfoStore } from "../../store/runInfo";
import { useAppStore } from "../../store/app";
import { useShareStore } from "../../store/share";
import { useGroupStore } from "../../store/group";
import { userLoginStore } from "../../store/userLogin";
import ToastArrow from "../../components/toastArrow.vue";
import phLikeDefault from "../static/ph-like-default.png"
import phLikeActive from "../static/ph-like-active.png"
const useShareData = useShareStore();
const useAppData = useAppStore();
const useRunInfoData = useRunInfoStore();
const useGroupData = useGroupStore();
const userLoginData = userLoginStore();
import headerBgImg from "../../static/bg@2x_compressed.png";
const { showPictureUpload } = storeToRefs(useRunInfoData);
const { groupInfo, myGroupInfo, groupMemberList } = storeToRefs(useGroupData);
import dayjs from "dayjs";
import ShareGroup from "../components/shareGroup.vue";
import { transferCommander } from "../../api/api";
const transferPopup = ref(null);
const alertDialog = ref(null);
const uploadAvatar = ref(null);
const shareGroupRef = ref(null);
const joinGroupRef = ref(null)
const state = reactive({
  list: [],
  show: false,
  recordObj: {
    distanceTotal: 0,
    durationTotal: 0,
    list: [],
  },
  userInfo: null,
  barWidth: 0,
  dialogType: 1,
  showEditPicture: false,
  createTime: "",
  groupId: "",
  memberInfo: {},
  showToast: false,
  routeOptions: null,
  token: null,
  isClickFlag: false,
  animationData: {}
});

onShareAppMessage((res) => {
  return useShareData.shareInfo;
});
onShareTimeline((res) => {
  return useShareData.shareInfo;
});


const onCreateThumsUp = (groupInfo) => {
  if (!state.isClickFlag) return
  state.isClickFlag = false
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if (!state.token) {
    uni.showToast({
      title: "请先登录，再点赞",
      icon: "none"
    })
    setTimeout(() => {
      uni.navigateTo({
        url: "/pages/login/login"
      })
      userLoginData.setRedirectUrl(currentPage.$page.fullPath)
      state.isClickFlag = true
    }, 1500)
    return
  }
  if (!groupInfo || !groupInfo.groupId) {
    state.isClickFlag = true
    return
  }
  useGroupData.onThumsUp(groupInfo.groupId).then(res => {
    state.isClickFlag = true
    if (res.code === 0) {
      onPraise(groupInfo)
      useGroupData.onGetGroupInfoByGroupId(groupInfo.groupId)
    }
  }).catch(err => {
    state.isClickFlag = true
  })
}

//点赞
const onPraise = (item) => {
  const id = item.groupId
  //点击时，描绘动画的运动过程
  state.animation.translateY(-80).opacity(1).step({duration: 800});
  state.animationData = {};  //必须要清空，如果没有清空，引用是一样的，页面就不会重新渲染，导致动画无法显示。vue的特性
  state.animationData[id] = state.animation.export();  //导出动画，对应的键是当前数据的ID
  setTimeout(()=>{  //时间到后，动画恢复原点
    state.animation.translateY(0).opacity(0).step({duration: 0})
    state.animationData = {};
    state.animationData[id] = state.animation.export();
  },500);
}

const onJoinGroup = () => {
  if (groupInfo?.value?.fullStarffed) return
  nextTick(() => {
    if (!state.token) {
      joinGroupRef?.value?.onShowLoginPop()
    } else {
      if (!checkUserInfo(state.userInfo?.customers)) {
        joinGroupRef?.value?.onShowPersonPop()
      } else {
        joinGroupRef?.value?.groupJudgeJoin()
      }
    }
  })
}

const onOpenQrcode = () => {
  shareGroupRef?.value?.openQrcodeRef("service");
};

const gotoBack = () => {
  let pages = getCurrentPages();//当前页面栈
  if (pages && pages.length > 1) {
    let prevPage = pages[pages.length - 2];//上一页面
    let delta = 2
    if (prevPage.route.includes('pages/login/login')) {
      delta = 3
    }
    uni.navigateBack({
      delta
    });
  } else {
    uni.reLaunch({
      url: "/runGroupPages/index/index"
    })
  }
};

const toQueryString = (options) => {
  return Object.keys(options)
    .map((key) => `${key}=${options[key]}`)
    .join("&");
};
// 刷新按钮
const refreshPage = () => {
  // 重新加载当前页面
  const pages = getCurrentPages(); // 获取当前页面栈
  const currentPage = pages[pages.length - 1]; // 获取当前页面实例

  uni.redirectTo({
    url: `/${currentPage.route}?${toQueryString(currentPage.options)}`,
  });
};
// 添加团员
const openSharePopup = () => {
  shareGroupRef.value.openPopup();
};
// 编辑团名
const openEditeModal = () => {
  useRunInfoData.setPictureUpload(true);
  nextTick(() => {
    if (uploadAvatar.value) {
      uploadAvatar.value.openPopup();
    }
  });
};
// 三个点操作
const openOperation = (item) => {
  transferPopup.value.open();
  state.memberInfo = item;
};
// 关闭弹出层
const closePopup = () => {
  transferPopup.value.close();
};
// 转让团长
const transTeamLeader = () => {
  state.dialogType = 1;
  alertDialog.value.open();
};
// 移除团员
const deleteMember = () => {
  state.dialogType = 2;
  alertDialog.value.open();
};
// 退出跑团
const leaveGroup = () => {
  state.dialogType = 3;
  alertDialog.value.open();
};
// 确认转让团长
const dialogConfirmTrans = () => {
  alertDialog.value.close();
  transferPopup.value.close();
  if (state.dialogType === 1) {
    transferGroupFun();
  } else if (state.dialogType === 2) {
    deleteGroupMemberFun("other");
  } else if (state.dialogType === 3) {
    deleteGroupMemberFun("me");
  }
  refreshPage();
};
// 取消
const dialogClose = () => {
  alertDialog.value.close();
};
const transferGroupFun = () => {
  API.transferCommander({
    userId: state.memberInfo?.userId,
    groupId: groupInfo.value?.groupId,
  }).then((res) => {
    if (res.code === 0) {
      uni.showToast({
        title: "转让成功",
        icon: "none",
      });
      getGroupInfo();
    } else {
      uni.showToast({
        title: res.message,
        icon: "none",
      });
    }
  });
};
const deleteGroupMemberFun = (type) => {
  API.deleteGroupMember({
    userId:
      type === "other" ? state.memberInfo?.userId : state.userInfo?.customers?.customerId,
    groupId: groupInfo.value.groupId,
  }).then((res) => {
    if (res.code === 0) {
      if (type === "me") {
        uni.showToast({
          title: "退出成功",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/runGroupPages/group/groupInfo",
          });
        }, 1000);
      } else {
        uni.showToast({
          title: "移除成功",
          icon: "none",
        });
        useGroupData.onGetGroupMemberList();
      }
    } else {
      uni.showToast({
        title: res.message,
        icon: "none",
      });
    }
  });
};

// 获取页面数据
const getGroupInfo = async () => {
  await useGroupData.onGetGroupInfo();
  if (
    !myGroupInfo.value?.groupId ||
    (state.routeOptions?.groupId &&
      myGroupInfo.value?.groupId != state.routeOptions?.groupId)
  ) {
    await useGroupData.onGetGroupInfoByGroupId(state.routeOptions?.groupId);
  }
  await useGroupData.onGetGroupMemberList();
  state.createTime = groupInfo.value?.createTime
    ? dayjs(groupInfo.value?.createTime).format("YYYY年MM月DD日")
    : "";
  uni.stopPullDownRefresh();
  state.barWidth = parseFloat(groupInfo.value?.memberNumber / groupInfo.value?.limitNumber).toFixed(2) * 100 + "%";
};
onPullDownRefresh(() => {
  getGroupInfo();
});

onLoad(() => {
  state.showToast = true;
  setTimeout(() => {
    state.showToast = false;
  }, 5 * 1000);
  state.animation = uni.createAnimation();
  state.isClickFlag = true
});

onShow(() => {
  state.userInfo = uni.getStorageSync("userInfo")
    ? JSON.parse(uni.getStorageSync("userInfo"))
    : null;
  state.token = uni.getStorageSync("token") ? uni.getStorageSync("token") : null;
  const pages = getCurrentPages();
  // 获取当前页面实例
  const currentPage = pages[pages.length - 1];
  // 获取页面路径参数
  state.routeOptions = currentPage.options;
  getGroupInfo();
});
</script>

<style lang="scss" scoped>
.run-group-page {
  width: 100vw;
  height: calc(100vh - 88rpx);
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  overflow: hidden;
  .header-box {
    position: relative;
    width: 100vw;
    height: 502rpx;
    text-align: center;
    .title {
      font-size: 34rpx;
      color: #000000;
    }
    .header-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .update-btn {
      width: 170rpx;
      height: 60rpx;
      margin: 0 auto;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 60rpx;
      margin-top: 12px;
      .label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.7);
        line-height: 34rpx;
        text-align: center;
        font-style: normal;
      }
      .icon {
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
  .user-group-modal {
    position: relative;
    box-sizing: border-box;
    background: transparent;
    margin-top: -106rpx;
    .header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 106rpx;
      margin: 0 24rpx;
      z-index: 10;
      .avatar {
        width: 154rpx;
        height: 154rpx;
        border-radius: 16rpx;
        overflow: hidden;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .header-right {
        display: flex;
        align-items: center;
      }
      .add-member {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 208rpx;
        height: 72rpx;
        background: linear-gradient(331deg, #f9f72c 0%, #90ff8d 100%);
        border-radius: 36rpx;
        margin-right: 34rpx;
        .icon {
          width: 40rpx;
          height: 40rpx;
        }
        .label {
          width: 112rpx;
          height: 40rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #263901;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-left: 12rpx;
        }
      }
      .qr-code {
        width: 72rpx;
        height: 72rpx;
        background: linear-gradient(331deg, #f9f72c 0%, #90ff8d 100%);
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .icon-code {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
    .group-info-container {
      background: #fff;
      border-radius: 48rpx 48rpx 0rpx 0rpx;
      overflow: hidden;
      margin-top: -106rpx;
      .bottom-line {
        border: 2rpx solid #eef2f1;
        margin: 28rpx 24rpx 16rpx;
      }
    }
    .group-info {
      position: relative;
      padding-top: 120rpx;
      width: 100%;
      background: linear-gradient(179deg, #d8ffeb 0%, rgba(255, 255, 255, 0) 100%);
      overflow: hidden;
      .name {
        height: 50rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 24rpx 4rpx;
        .username {
          display: block;
          max-width: 400rpx;
          height: 50rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #222222;
          line-height: 50rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .icon {
          width: 32rpx;
          height: 32rpx;
          margin-left: 12rpx;
        }
      }
      .group-id {
        display: block;
        margin: 0 24rpx;
        height: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(34, 34, 34, 0.6);
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }
      .group-create {
        font-size: 24rpx;
      }
      .group-member {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 34rpx;
        margin: 4rpx 24rpx 8rpx;
        .progress-bar {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 20rpx;
          width: 540rpx;
          background: #e2f3ec;
          border-radius: 16rpx;
          .current-progress {
            height: 20rpx;
            background: linear-gradient(117deg, #25ec8a 0%, #90ff8d 100%);
            border-radius: 16rpx;
          }
        }
        .label {
          height: 34rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(34, 34, 34, 0.9);
          line-height: 34rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .total-distance {
        margin: 0 24rpx;
        height: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(34, 34, 34, 0.7);
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .distance-item {
          display: flex;
          align-items: center;
        }
        .group-rank {
          color: #ff5d02;
        }
        .thumbs-up {
          display: flex;
          align-items: center;
          .like-con{
            display: flex;
            align-items: center;
            position: relative;
          }
          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 6rpx;
          }
          font-size: 28rpx;
          color: #222222;
        }
      }
    }
  }
  .run-group-info {
    position: relative;
    height: calc(100vh - 825rpx);
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    .leave-group {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 20rpx;
      width: 700rpx;
      height: 92rpx;
      margin: 0 auto;
      left: 50%;
      margin-left: -350rpx;
      border-radius: 16rpx;
      background: #fff;
      border: 2rpx solid #08cb8f;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #08cb8f;
      line-height: 92rpx;
      text-align: left;
      font-style: normal;
    }
    .add-group {
      color: #fff;
    }
    .full-starffed {
      border: none;
      background: #5d6160!important;
      color: #fff;
    }
  }
  .group-member-list {
    position: relative;
    padding-bottom: 124rpx;
    min-height: 748rpx;
    .group-member-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 24rpx;
      height: 140rpx;
      .avatar {
        width: 92rpx;
        height: 92rpx;
        border-radius: 16rpx;
        margin-right: 18rpx;
        flex-shrink: 0;
        overflow: hidden;
        .icon {
          width: 100%;
          height: 100%;
        }
      }
      .member-info {
        flex: 1;
        flex-shrink: 0;
        .name {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .nickname {
            display: block;
            max-width: 400rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: rgba(34, 34, 34, 0.7);
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .sex-icon {
            width: 36rpx;
            height: 36rpx;
            margin: 0 16rpx 0 8rpx;
          }
          .label {
            display: inline-block;
            height: 32rpx;
            background: #c3f2c5;
            border-radius: 8rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #3a8439;
            line-height: 32rpx;
            padding: 0 6rpx;
            font-style: normal;
          }
          .me {
            margin: 0 10rpx;
          }
        }
        .distance-info {
          height: 40rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(34, 34, 34, 0.7);
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-top: 8rpx;
        }
      }
      .operation {
        width: 92rpx;
        height: 92rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .points {
          width: 44rpx;
          height: 12rpx;
          flex-shrink: 0;
        }
      }
    }
  }
  .no-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40rpx;
    color: #222222;
    padding-top: 20vh;
    .no-img {
      width: 200rpx;
      height: 176rpx;
      margin-bottom: 36rpx;
    }
  }
  .popup-container {
    .op-content {
      width: 710rpx;
      height: 218rpx;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 14rpx;
      backdrop-filter: blur(25px);
      .op-item {
        height: 109rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(34, 34, 34, 0.9);
        line-height: 109rpx;
        font-style: normal;
        text-align: center;
        &:first-child {
          border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);
        }
      }
    }
    .close-btn {
      width: 710rpx;
      height: 104rpx;
      margin: 0 auto;
      line-height: 104rpx;
      text-align: center;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 16rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #08cb8f;
      font-style: normal;
    }
  }
  .dialog-content {
    .label {
      height: 44rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #1c1c1e;
      line-height: 44rpx;
      text-align: center;
      font-style: normal;
    }
    .text {
      height: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #abafba;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      margin-top: 16rpx;
    }
  }
  .praise-me {
    font-size: 44rpx;
    color: #FFA31E;
    align-self: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .animation-opacity{
    font-weight: bold;
    color: #FFA31E;
    opacity: 0;   /* 备注： 默认透明度为 0，不显示 */
  }
}
</style>
